<template>
	<div class="goods">
		<!--标题栏-->
		<div class="menu-wrapper" ref="menuWrapper">
			<ul>
				<!--食物分类菜单-->
				<li v-for="(item,index) in goods" class="menu-item"
				    :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
					<span class="text border-1px">
						<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>
						{{item.name}}
					</span>
				</li>
			</ul>
		</div>
		<!--食品栏-->
		<div class="foods-wrapper" ref="foodsWrapper">
			<ul>
				<li v-for="item in goods" class="food-list food-list-hook">
					<!--食物分类菜单标题-->
					<h1 class="title">{{item.name}}</h1>
					<!--食物分类菜单详情-->
					<ul>
						<li v-for="food in item.foods"
						    @click="selectedFood(food,$event)" class="food-item
						    border-1px">
							<!--食物图片-->
							<div class="icon">
								<img width="57" height="57" :src="food.icon">
							</div>
							<!--食物描述-->
							<div class="content">
								<!--食品名称-->
								<h2 class="name">{{food.name}}</h2>
								<!--食品描述-->
								<p class="desc">{{food.description}}<p/>
								<!--食品额外数据-->
								<div class="extra">
									<span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
								</div>
								<!--食品价格-->
								<div class="price">
									<span class="now">¥{{food.price}}</span><span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
								</div>
								<!--控制购物车组件-->
								<div class="cartcontrol-warpper">
									<cartcontrol :food="food"
									             @ball="addball($event)"></cartcontrol>
								</div>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!--购物车-->
		<shopcart ref="shopcart" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice"
		          :min-price="seller.minPrice"></shopcart>
		<!--食物详情-->
		<food :food="selectFood" ref="food"></food>
	</div>
</template>

<script type="text/ecmascript-6">
    import BScroll from 'better-scroll';
    import shopcart from 'components/shopcart/shopcart'
    import cartcontrol from 'components/cartcontrol/cartcontrol'
    import food from 'components/food/food'
    import Vue from 'vue';

    const ERR_OK =0;


    export default {
        props:{
            seller:{
                type:Object
            }
        },
        data() {
            return {
                //json的数据
                goods : [],
                //每条foodList所在的高度区间,是一个递增的数组
                listHeight : [],
                //食品栏的scrollY
                scrollY:0,
                //查看食物详情
                selectFood:{}
            };
        },
        computed: {
            //菜单栏的索引
            currentIndex() {
                for(let i=0;i<this.listHeight.length;i++){
                    //获得当前索引的上高度
                    let height1 = this.listHeight[i]
                    //获得当前索引的下高度
                    let height2 = this.listHeight[i+1];
                    //foodlist落到这个高度区间中,证明当前的索引值就是标题栏的对应索引,所以最后返回这个索引值,对应下标的标题高亮显示就好了
                    //当i为最后1个值时,this.listHeight[i+1]就是undefined了,所以当!height2时,索引值也就是i
                    if(!height2||(this.scrollY >=height1 && this.scrollY<height2)){
                        return i;
                    }
                }
                //如果没有listHeight,就返回0
                return 0;
            },
            //选择了什么食物
            selectFoods() {
                let foods= [];
                //首先获取的是data里面的goods数据,然后遍历了goods数据获取里面的foods
                this.goods.forEach((goods) => {
                    //遍历goods里面的foods
                    goods.foods.forEach((food) => {
                        if(food.count){
                            foods.push(food);
                        }
                    });
                });
                return foods;
            }
        },
        created() {
            this.classMap = ['decrease','discount','special','invoice','guarantee'];
            this.$http.get('/api/goods').then((response) =>{
                response = response.body;
                if(response.errno === ERR_OK){
                    this.goods = response.data
                    //vue更新DOM是异步的,初始化scroll是要等vue更新完DOM后才触发,这样才能计算到实际盒子的高度,从而才有滚动效果
                    this.$nextTick(() => {
                        //初始化betterScroll
                        this._initScroll();
                        //计算食品栏每个food-list的高度
                        this._calculateHeight();
                    })
                }
            });
            //用v-on绑定
//            this.$root.eventHub.$on('cart.add', target => {
//                this._drop(target);
//            });
        },
        methods: {
            //初始化betterScroll
            _initScroll() {
                //初始化标题栏栏可滚动
                this.menuScroll = new BScroll(this.$refs.menuWrapper,{
                    //支持点击事件
                    click:true
                });
                //初始化食品栏可滚动
                this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{
                    //probeType为3,就是元素再swipe的情况下,仍然能事实派发scroll事件
                    probeType: 3,
                    //支持点击事件
                    click:true
                });
                //食品栏滚动事件
                this.foodsScroll.on('scroll',(pos) => {
                    //food-list的scrollY
                    this.scrollY = Math.abs(Math.round(pos.y));
                })
            },
            //计算食品栏每个food-list的高度
            _calculateHeight() {
                //获取food-list
                let foodList =this.$refs.foodsWrapper.getElementsByClassName("food-list-hook");
                //初始高度为0
                let height=0;
                this.listHeight.push(height);
                for(let i=0;i<foodList.length;i++){
                    let item = foodList[i];
                    height+=item.clientHeight;
                    this.listHeight.push(height);
                }
            },
            //菜单栏点击事件
            selectMenu(index,event) {
                //取消pc端点击时,出发两次点击事件
                if(!event._constructed){
                    return;
                }
                //获取food-list
                let foodList =this.$refs.foodsWrapper.getElementsByClassName("food-list-hook");
                let el = foodList[index];
                //iscroll的方法
                this.foodsScroll.scrollToElement(el,300)
            },
            //小球向下滚动画
            _drop(target) {
                //优化体验,异步执行小球下落的动画
                this.$nextTick(() => {
                    this.$refs.shopcart.drop(target)
                })
            },
            //选中食物查看详情
            selectedFood(food,event){
                if(!event._constructed){
                    //防止pc端触发两次事件
                    return;
                }
                //点击食物 , 将食物对象传到selectedFood中
                this.selectFood = food;
                //调用子组件food里面的事件
                this.$refs.food.showFood();
            },
            addball(event) {
                this._drop(event);
	        }
        },
        components: {
            shopcart,
            cartcontrol,
            food
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "../../common/stylus/mixin";
	.goods
		display:flex
		width:100%
		position:absolute
		top:174px
		bottom: 46px
		overflow:hidden
		/*标题栏*/
		.menu-wrapper
			flex:0 0 80px
			width: 80px
			background: #f3f5f7
			.menu-item
				display:table
				width: 56px
				height: 54px
				line-height:14px
				padding:0 12px
				&.current
					position: relative
					z-index:10
					margin-top:-1px
					background: #fff
					font-weight:700
					.text
						border-none()
				.icon
					display:inline-block
					width: 12px
					height: 12px
					vertical-align :top
					margin-right: 2px
					background-size:12px 12px
					background-repeat:no-repeat
					&.decrease
						bg-img('decrease_3')
					&.discount
						bg-img('discount_3')
					&.guarantee
						bg-img('guarantee_3')
					&.invoice
						bg-img('invoice_3')
					&.special
						bg-img('special_3')
				.text
					display :table-cell
					vertical-align :middle
					border-1px(rgba(7,17,27,0.1))
					font-size: 12px
					color:rgb(24,20,20)
		/*食品栏*/
		.foods-wrapper
			flex:1
			.title
				padding-left: 14px
				height: 26px
				line-height:26px
				border-left:2px solid #d9dde1
				font-size:12px
				color:rgb(147,153,159)
				background: #f3f5f7
			.food-item
				display:flex
				margin: 18px
				padding-bottom:18px
				border-1px(rgba(7,17,27,0.1))
				&:last-child
					border-none()
					margin-bottom :0
				.icon
					flex:0 0 57px
					margin-right: 10px
				.content
					flex:1
					.name
						margin:2px 0 8px 0
						height: 14px
						line-height:14px
						font-size: 14px
						color:rgb(7,17,27)
					.desc,.extra
						line-height: 10px
						font-size: 10px
						color:rgb(147,153,159)
					.desc
						margin-bottom: 8px
						line-height: 12px
					.extra
						.count
							margin-right:12px
					.price
						font-weight:700
						line-height: 24px
						.now
							margin-right: 8px
							font-size: 14px
							color:rgb(240,20,20)
						.old
							text-decoration :line-through
							font-size:10px
							color:rgb(147,153,159)
					.cartcontrol-warpper
						position:absolute
						right:0
						bottom:12px
</style>